<template>
	<cl-select-table
		v-model="value"
		:title="t('选择优惠券')"
		:service="service.coupon.info"
		:columns="columns"
		:multiple="multiple"
		:dict="{ text: 'name' }"
		pickerType="text"
	/>
</template>

<script setup lang="ts">
defineOptions({
	name: 'coupon-coupon-select'
});

import { useCool } from '/@/cool';
import { useI18n } from 'vue-i18n';
import { CrudProps } from '/#/crud';
import { reactive, ref, useModel } from 'vue';

const props = defineProps({
	...CrudProps,
	modelValue: null,
	multiple: Boolean
});

const { service } = useCool();
const { t } = useI18n();

const value = useModel(props, 'modelValue');

// 选项
const options = reactive({
	type: [
		{ label: t('满减券'), value: 0, type: 'danger' },
		{ label: t('折扣券'), value: 1, type: 'success' }
	]
});

const columns = ref([
	{ label: t('名称'), prop: 'name', minWidth: 140 },
	{ label: t('类型'), prop: 'type', minWidth: 120, dict: options.type },
	{
		label: t('优惠金额/折扣率'),
		prop: 'discountValue',
		minWidth: 140,
		sortable: 'custom'
	},
	{
		label: t('最低使用金额'),
		prop: 'minUseAmount',
		minWidth: 140,
		sortable: 'custom'
	},
	{
		label: t('发放总量'),
		prop: 'totalQuantity',
		minWidth: 140,
		sortable: 'custom'
	},
	{
		label: t('剩余数量'),
		prop: 'remainingQuantity',
		minWidth: 140,
		sortable: 'custom'
	},
	{
		label: t('有效期开始时间'),
		prop: 'startTime',
		minWidth: 170,
		sortable: 'custom',
		component: { name: 'cl-date-text' }
	},
	{
		label: t('有效期结束时间'),
		prop: 'endTime',
		minWidth: 170,
		sortable: 'custom',
		component: { name: 'cl-date-text' }
	},
	{
		label: t('使用说明'),
		prop: 'description',
		showOverflowTooltip: true,
		minWidth: 200
	}
]);
</script>
